<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-direction</title>
  <style>
    .drow,.drowRev,.dCol,.dColRev {
      width: 60%;
      height: 200px;
      background-color: lightblue;
      display: flex;
    }
    .drowRev {
      flex-direction: row-reverse;
    }
    .dCol {
      flex-direction: column;
    }
    .dColRev {
      flex-direction: column-reverse;
    }
    .d1,.d2,.d3 {
      width: 200px;
      height: 100px;
      background-color: pink;
      margin-right: 10px;
      margin-bottom: 10px;
      text-align: center;

    }

  </style>
</head>
<body>
<h1>flex项目（子盒子）在主轴上的方向<hr color="red"></h1>
<h2>1. Flex-direction:row(按主轴从左向右) <hr></h2>
<div class="drow">
  <div class="d1">d1</div>
  <div class="d2">d2</div>
  <div class="d3">d3</div>
</div>
<h2>2. Flex-direction:row-reverse(按主轴从右向左) <hr></h2>
<div class="drowRev">
  <div class="d1">d1</div>
  <div class="d2">d2</div>
  <div class="d3">d3</div>
</div>
<h2>3. Flex-direction:column(按交叉轴方向从上向下) <hr></h2>
<div class="dCol">
  <div class="d1">d1</div>
  <div class="d2">d2</div>
  <div class="d3">d3</div>
</div>
<h2>4. Flex-direction:column-reverse(按交叉轴方向从下向上) <hr></h2>
<div class="dColRev">
  <div class="d1">d1</div>
  <div class="d2">d2</div>
  <div class="d3">d3</div>
</div>
</body>
</html>
